<template>
	<!-- <navbar title="我的"></navbar> -->
<view  >
			<u-swiper :list="swiperList" height="554" mode="round"></u-swiper>
		</view>
	<view class="navbar_s">
		
		<span style="width: 100%;">商城</span>
		<view class="" style="margin-top: 40rpx;padding: 0 40rpx;width: 100%;">
			<u-search placeholder="搜索" v-model="param.key_words" :show-action="false" @change="searchChange"></u-search>
		</view>
	</view>
	
	<classify-one :classList="classList" :classListShow="classListShow" @changenav="changenav"></classify-one>
	<tabbar :current="2"></tabbar>
</template>

<script setup lang="ts">
	import classifyOne from "@/components/classifyone/classifyone.vue"
	import { reactive, ref } from 'vue'
	import { shopGetClassify, shopGetGoodsList, shopCarousel } from '@/service/api/shop'
	import { onLoad, onShow } from '@dcloudio/uni-app'
	import tools from '@/utils/tools'
	import tabbar from '@/common/tabbar/index.vue'
	const param = reactive({
		class_id: 0,
		key_words: "",
		page: 1
	})
	const classList = ref([

	])
	const classListShow = ref([

	]) as any
	const swiperList = ref([])
	onLoad(() => {
		
	})
	onShow(()=>{
		getData();
		getCarousel()
	})
	const getData = async () => {
		const res = await shopGetClassify('');
		classList.value = res.msg;
		//console.log(res);
		getGoodsData()
	}
	//轮播图
	const getCarousel = async () => {
 
		const res = await shopCarousel("");
	swiperList.value  =	res.msg.map((item)=>{
			return item.img
		})
		//swiperList.value = [...res.msg];
 
	}
	//搜索
	const searchChange = () => {
		getGoodsData()
	}
	//商品列表数据
	const getGoodsData = async () => {
		const res = await shopGetGoodsList(param);
		classListShow.value = res.msg.data;
		console.log(res);
	}
	const changenav = (class_id : number) => {
		param.class_id = class_id;
		getGoodsData()
	}
</script>

<style lang="scss" scoped>
	.navbar_s {
		text-align: center;
		padding-top: 104rpx;
		color: white;
		font-size: 36rpx;
		position: absolute;
		top: 0;
		width: 100%;
	}
	:deep(.u-content){
		background-color: rgba(242,242,242,0.8) !important;
		.u-input{
			background-color: rgba(242,242,242,0.1) !important;
		}
	}
</style>